<template>
    <div class="detail">
        <tool-bar2 :names="names"></tool-bar2>
        <div class="content">
            <van-list v-model="loading" :finished="finished" @load="onLoad" finished-text="没有更多了">
                <div class="list-item" v-for="(l,index) in list" :key="index" :class="l.type==1?'active':''">
                    <div class="left">
                        <p>{{l.desc}}</p>
                        <p>时间：{{l.create_time*1000|formatDate(3)}}</p>
                    </div>
                    <div class="right" v-if="l.type==1">
                        <span class="icon">+</span><span class="num">{{l.integral}}</span>
                        ABNB
                    </div>
                    <div class="right" v-if="l.type==2">
                        <span class="icon">-</span><span class="num">{{l.integral}}</span>
                        ABNB
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
    import ToolBar2 from "./ToolBar";
    export default {
        name: "IntegralDetail",
        components: {ToolBar2},
        data(){
            return {
                names:"我的积分",
                list:[],
                page:1,
                loading: false,//控制上拉加载的加载动画
                finished: false,//控制在页面往下移动到底部时是否调用接口获取数据
                isLoading: false,//控制下拉刷新的加载动画
            }
        },
        mounted() {


        },
        methods:{
            onLoad() {
                let self = this;
                setTimeout(() => {
                    let data = {
                        token:this.getCookie("token"),
                        page:this.page,
                    }
                    self.$api.my.IntegralLogList(data).then(res=> {
                        // 执行某些操作
                        self.list = self.list.concat(res.data.data);
                        self.loading = false;
                        self.page++;
                        if (res.data.data.length<10) {
                            self.finished = true;
                        }

                    })


                }, 500);
            }
        }
    }
</script>

<style scoped>
    .content{
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
        background: #fff;
    }
    .list-item{
        padding: 0.2rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        height: 4rem;
    }
    .left{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        height: 100%;

    }
    .left p{
        text-align: left;
        width: 100%;
    }
    .left p:first-child{
        font-size:1rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .left p:last-child{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .right{
        font-size:0.84rem;
        font-family:PingFang SC;
        color:#333333;
        display: flex;
        align-items: baseline;
    }
    .icon{
        color: #f00;
        font-size: 1rem;
        font-weight: bold;
    }
    .num{
        font-size: 1.25rem;
        color: #f00;
        font-weight: bold;
    }
    .active .icon,.active .num{
        color: #14A365;
    }
</style>